<template>
    <div class="page-component">
      <h2>MavonEditor富文本使用</h2>
      <p>如果highlight.js与MavonEditor都用的话,页面跳转到mavonEditor上时,会将highlight.js的样式给覆盖掉</p>
      <h3>1.Install mavon-editor (安装)</h3>
      <div v-highlight>
        <pre>
          <code>$ npm install mavon-editor --save</code>
        </pre>
      </div>
      <h3>2.use(如何引用)</h3>
      <p>index.js</p>
      <div v-highlight>
        <pre>
          <code>// 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })</code>
        </pre>
      </div>
      <h3>3.在页面或组件中引用</h3>
      <div v-highlight>
        <pre>
          <code>
&lt;template&gt;
  &lt;div class=&quot;mavonEditor&quot;&gt;
    &lt;no-ssr&gt;
      &lt;mavon-editor :toolbars=&quot;markdownOption&quot; v-model=&quot;handbook&quot;/&gt;
    &lt;/no-ssr&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        ... // 更多配置
      },
      handbook: &quot;#### how to use mavonEditor in nuxt.js&quot;
    };
  }
};
&lt;/script&gt;

&lt;style scoped&gt;
.mavonEditor {
  width: 100%;
  height: 100%;
}
&lt;/style&gt;
          </code>
        </pre>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'el_MavonEditor'
  }
</script>

<style scoped>

</style>
